<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<!--    metaphysics-->
    <meta charset="UTF-8">
    <title>老师信息</title>

    <style>
        body{
            width:960px;
            margin:0 auto;


        }

        .n1{
            margin-top: 20px;
            font-size:20px;


        }
        .i1{
          font-size:25px;
        }

        .teacher{
        clear:both;
        }
        }
        .photo{
            width:140px;
            height:140px;
            margin-top:20px
            border-radius:50px 50px 50px 50px;
            overflow:hidden;
            float:left;


        }
        .content{
            margin-left:60px;
            width:580px;
            float:left;
        }
    </style>
</head>
<body>

    <h2>{{subject.name}}老师信息</h2>

    <hr>

    {% for teach in teachers %}
    <div class="teacher">
        <div class="photo">
            <img src="{{ teach.photo.url }}" width="140">
        </div>
        <div class="content" >
             <p class="n1">
           {{teach.name}}&nbsp;&nbsp;
           {{teach.sex | yesno:"男,女" }}&nbsp;&nbsp;
           {{teach.birth}}&nbsp;&nbsp;
       </p>
        <p class="i1">
            {{ teach.intro }}
        </p>
        <p class="comment">
            <a href="/good/?tno={{teach.no}}">好评</a>(<span>{{ teach.good_count }}</span>)&nbsp;&nbsp;
             <a href="/bad/?tno={{teach.no}}">差评</a>(<span>{{ teach.bad_count }}</span>)
        </p>

        </div>



    </div>
    {% endfor %}
    <script  src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
    	
    </script>
<!--    // $()函数中的箭头函数是页面加载完成后要执行的回调-->
    <script>
    	$(() => {
    		$('.comment>a').on('click',(evt) =>{

    			evt.preventDefault()

    			let anchor = $(evt.target)
    			$.getJSON(anchor.attr('href'),(json) => {
    				if (json.code == 10000) {
    					let span = anchor.next()
    					span.text(parseInt(span.text()) +1)

    				}else{
    					alert(json.message)
    					if (json.code == 10002){
    					    location.href = '/login/?backurl=' +btoa('/teachers/?sno={{subject.no}}')
    					}
    				}
    			})
    		})
    	})
      
    </script>



<!--    django模板页，可以使用django的语法指令来生产动态页-->
<!--    <ul>-->
<!--        {% for fruit in fruits %}-->
<!--        <li>{{ fruit }}</li>-->
<!--        {% endfor %}-->
<!--    </ul>-->

</body>
</html>